<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>new Map()常用方法</title>
</head>
<body>
    <script>
        //1.实例化Map
        const map = new Map()
        //2.设置map对象值
        map.set('delete', 1000)
        map.set({skill:1}, 1)  //可以使任意数据类型为key, object只能用string或Symbol为key
        map.set('name', 'abc')
        //3.size属性
        console.log("3  ", map.size);    //3
        //4.根据key获取value
        console.log("4  ", map.get('name'));
        //5.查找是否存在某个key
        console.log("5  ",map.has('name'));  // true
        //6.delete
        map.delete('delete')
        console.log("6  ",map);
        //7.Object.keys()
        console.log("7  ",map.keys());    //返回的是伪数组
        console.log("7  ",map.values());
        //8. for...of
        for(let key of map.keys()){
            console.log("8  key",key);
        }
        for(let value of map.values()){
            console.log("8  value",value);
        }
        //9 forEach, 注意第一个参数是value, 第二个参数是key
        map.forEach((value, key) => {
            console.log("9  ",key, value);
        })
        //10. entries() 返回键值对的遍历器
        for(let item of map.entries()){
            console.log("10 ",item);  //返回的是数组  [ [{skill: 1}, 1], ['name', 'abc']]
        }
        
        //11. 数组的去重, 当同一个key多次赋值时, 后面的会覆盖前面的, 而Map的key是有序的
        const nums = [10, 2, 10, 5, 10]
        const map2 = new Map()
        nums.forEach((value, index) => {
            map2.set(value, index)
        })
        const nums2 = Array.from(map2.keys())   //将伪数组转为数组
        console.log("11 ",nums, "去重=>" ,nums2)   

        //12 new Map(arr), 会把二维数组变成键值对, 舍弃多余的数据
        const arr = [
            ["1",1,3],["2",2,4]
        ]
        const map3 = new Map(arr)
        console.log("12 ",map3);   // Map(2) {'1' => 1, '2' => 2} ,  舍弃了 3, 4
    </script> 
</body>
</html>